<template>
    <div>
        <router-link tag="div" to="/" class="head-abs" v-show="isShowAbs">
            <span class="iconfont header-abs-back">&#xe624;</span>
        </router-link >

       
        <router-link to="/" tag="div" 
                     class="header-fixed"  
                     v-show="!isShowAbs" 
                     :style="opcityStyle">
            <span class="iconfont header-fixed-back">&#xe624;</span>
            景点详情
        </router-link >
    
    </div>
</template>

<script>
export default {
    name:'detailHeader',
    data(){
        return{
            isShowAbs:true,
           
            opcityStyle:{
                opacity:1
            }
        }
    },
    
    props:{
        scrollTop:String
    },
    
    watch:{
        scrollTop(){
            if(this.scrollTop<50){
                this.isShowAbs=true
            }else if(this.scrollTop>=50){
                this.isShowAbs=false
                this.opcityStyle.opacity= (this.scrollTop/140)>1 ? 1: this.scrollTop/140 
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .head-abs
        position:absolute
        left :.2rem
        top :.2rem
        width: .8rem
        height :.8rem
        border-radius: 0.4rem
        background :rgba(0,0,0,.8)
        text-align :center
        line-height :.8rem
        .header-abs-back
            color :#fff
            font-size :.4rem
    .header-fixed
        z-index :2
        overflow: hidden
        height :.86rem
        line-height :.86rem
        text-align :center
        color:#fff
        background :$bgColor
        font-size :.32rem
        position: fixed 
        top:0
        left:0
        right:0
        .header-fixed-back
           position:absolute
           top :0
           left :0
           width :0.64rem
           color :#fff        
</style>


